<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{position: relative;}
        .imgbox{float:left;padding: 6px;}
        img{width:200px;border: solid 1px black;border-radius: 6px;}
    </style>
</head>
<body>
    <div class="cont">
        <div class="imgbox">
            <img src="./imgs/3.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/5.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/1.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/4.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/2.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/6.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/7.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/8.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/9.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/10.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/3.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/5.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/1.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/4.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/2.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/6.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/7.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/8.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/9.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/10.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/3.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/5.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/1.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/4.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/2.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/6.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/7.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/8.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/9.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/10.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/3.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/5.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/1.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/4.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/2.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/6.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/7.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/8.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/9.jpg" alt="">
        </div>
        <div class="imgbox">
            <img src="./imgs/10.jpg" alt="">
        </div>
    </div>
</body>
<script>

    // 分析：瀑布流，所有元素等宽不等高，按列布局，将第一行元素所有高度作为初始列高，之后的元素依次根据最小列高及对应索引计算位置，并改变当前列高
    // 1. 获取元素
    // 2. 计算最大列数：可视区域的宽 / 任意一列的宽
    // 3. 根据列数，获取第一行所有元素的高度，作为初始列高
    // 4. 获取到其他元素添加定位，获取最小列高，用作top，获取最小列高的索引，计算left
    // 5. 改变当前列高：初始列高 + 新放置元素的高度

    // 设计：
    // function WaterFall(){
    //     // 1. 获取元素
        
    //     // 2. 计算最大列数：可视区域的宽 / 任意一列的宽

    //     // 3. 第一行
    //     this.firstLine();
    //     // 4. 其他行元素
    //     this.otherLine();
    // }
    // WaterFall.prototype.firstLine = function(){
    //     // 获取第一行所有元素的高度，作为初始列高
    // }
    // WaterFall.prototype.otherLine = function(){
    //     // 获取到其他元素添加定位，获取最小列高，用作top，获取最小列高的索引，计算left
        
    //     // 5. 修改列高
    //     this.changeColumn()
    // }
    // WaterFall.prototype.changeColumn = function(){}


    // 编程
    function WaterFall(){
        // 1. 获取元素
        this.imgbox = document.querySelectorAll(".imgbox");
        // 2. 计算最大列数：可视区域的宽 / 任意一列的宽
        this.clientW = document.documentElement.clientWidth;
        this.column = parseInt(this.clientW / this.imgbox[0].offsetWidth);

        // 3. 第一行
        this.firstLine();
        // 4. 其他行元素
        this.otherLine();
    }
    WaterFall.prototype.firstLine = function(){
        this.heightArr = [];
        // 获取第一行所有元素的高度，作为初始列高
        for(let i=0;i<this.column;i++){
            this.heightArr.push(this.imgbox[i].offsetHeight);
        }
    }
    WaterFall.prototype.otherLine = function(){
        // 获取到其他元素
        for(let i=this.column;i<this.imgbox.length;i++){
            // 添加定位
            this.imgbox[i].style.position = "absolute";
            // 获取最小列高，用作top
            // const min = Math.min(...this.heightArr)
            const min = Math.min.apply(null, this.heightArr);
            this.imgbox[i].style.top = min + "px";
            // 获取最小列高的索引，计算left
            this.minIndex = this.heightArr.indexOf(min);
            this.imgbox[i].style.left = this.minIndex * this.imgbox[0].offsetWidth + "px";

            // 5. 修改列高
            this.changeColumn( this.imgbox[i].offsetHeight );
        }
    }
    WaterFall.prototype.changeColumn = function(h){
        // 修改列高
        this.heightArr[this.minIndex] += h;
    }

    onload = function(){
        new WaterFall();
    }
    
</script>
</html>